<template>
  <el-dialog class="user" center :visible.sync="dialogVisible" width="600px">
    <div class="title" slot="title">
      {{ mode === 'add' ? '新增' : '修改' }}用户
    </div>
    <el-form
      ref="userFormRef"
      :model="userForm"
      :rules="rules"
      label-width="100px"
    >
      <el-form-item label="用户名" prop="username">
        <el-input v-model="userForm.username"></el-input>
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
        <el-input v-model="userForm.email"></el-input>
      </el-form-item>
      <el-form-item label="电话" prop="phone">
        <el-input v-model="userForm.phone"></el-input>
      </el-form-item>
      <el-form-item label="角色" prop="role_id">
        <el-select v-model="userForm.role_id" placeholder="请选择角色">
          <el-option label="超级管理员" :value="1"></el-option>
          <el-option label="管理员" :value="2"></el-option>
          <el-option label="老师" :value="3"></el-option>
          <el-option label="学生" :value="4"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-select v-model="userForm.status" placeholder="请选择状态">
          <el-option label="启用" :value="1"></el-option>
          <el-option label="禁用" :value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="用户备注" prop="remark">
        <el-input v-model="userForm.remark"></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="submit">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script lang="ts">
import { Vue, Component, Prop, Watch } from 'vue-property-decorator'
import { addUser, updateUser } from '@/api/user'
@Component({})
export default class UserEdit extends Vue {
  @Prop({ type: String, default: 'add' }) mode?: string

  declare userForm: any
  declare dialogVisible: boolean

  @Watch('dialogVisible')
  dialogVisibleChange(newVal: boolean) {
    this.$nextTick(() => {
      ;(this.$refs.userFormRef as any).clearValidate()
    })
  }

  data() {
    return {
      dialogVisible: false, // 显示&隐藏Dialog
      userForm: {
        username: '', // 用户名
        email: '', // 邮箱
        phone: '', // 电话
        role_id: '', // 角色
        status: '', // 状态
        remark: '' // 用户备注
      },
      rules: {
        username: [
          {
            required: true,
            message: '请输入用户名',
            trigger: 'blur'
          },
          {
            message: '用户名在6到12个字符之间',
            min: 6,
            max: 12,
            trigger: 'blur'
          }
        ],
        email: [
          {
            required: true,
            message: '邮箱不能为空',
            trigger: 'blur'
          },
          {
            validator: (rule: any, value: string, callback: Function) => {
              // eslint-disable-next-line
              const reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/

              if (!reg.test(value)) {
                callback(new Error('邮箱不合法!'))
              } else {
                callback()
              }
            },
            trigger: 'blur'
          }
        ],
        phone: [
          {
            required: true,
            message: '手机号不能为空',
            trigger: 'blur'
          },
          {
            validator: (rule: any, value: string, callback: Function) => {
              const reg = /1[3456789][0-9]{9}$/

              if (!reg.test(value)) {
                callback(new Error('手机号不合法!'))
              } else {
                callback()
              }
            },
            trigger: 'blur'
          }
        ],
        role_id: [
          {
            required: true,
            message: '请选择角色',
            trigger: 'blur'
          }
        ]
      }
    }
  }
  submit() {
    ;(this.$refs.userFormRef as any).validate(async (valid: boolean) => {
      if (valid) {
        let res = null
        if (this.mode === 'add') {
          res = await addUser(this.userForm)
        } else {
          res = await updateUser(this.userForm)
        }

        if (res.data.code === 200) {
          // 提示
          this.$message.success('编辑成功~')
          // 关闭弹框
          this.dialogVisible = false
          // 调用父组件的search方法
          ;(this.$parent as any).search()
        }
      }
    })
  }
}
</script>

<style lang="scss">
.user {
  .title {
    height: 53px;
    text-align: center;
    color: #fff;
    background-color: #0e9cfa;
    line-height: 53px;
  }
  .el-dialog__header {
    padding: 0;
  }
  .el-dialog__headerbtn .el-dialog__close {
    color: #fff;
  }
}
</style>
